<!DOCTYPE html>
<html class="loading" lang="zh-CN" data-textdirection="ltr">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
	<meta name="author" content="PIXINVENT">
	<title>666后台管理系统</title>
	<script src="app-assets/js/Dream.js"></script>
	<script src="app-assets/js/Http.js"></script>
	<link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css">
	<link rel="stylesheet" type="text/css" href="app-assets/css/vertical-menu.css">
	<link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap-extended.css">
</head>
<style>
	.modal-dialog {
		max-width: 1200px;
		/* 调整为你需要的最大宽度 */
		margin: 30px auto;
		/* 调整上下边距和居中 */
	}

	.modal-body {
		max-height: 600px;
		/* 调整为你需要的最大高度 */
		overflow-y: auto;
		/* 如果内容超出最大高度，显示滚动条 */
	}

	.status-unshipped {
		color: red;
		/* 未发货状态的颜色 */
	}

	.status-shipping {
		color: orange;
		/* 发货中状态的颜色 */
	}

	.status-shipped {
		color: blue;
		/* 已发货状态的颜色 */
	}

	.status-received {
		color: green;
		/* 已收货状态的颜色 */
	}
</style>

<body>
	<div class="content-wrapper">
		<div class="content-header">
			<div class="content-header-left mb-2 clearfix">
				<h3 class="content-header-title mb-0">采购订单</h3>
			</div>
		</div>
		<div class="card">
			<div class="card-content">
				<div class="card-body">
					<div class="table-responsive">
						<table class="table">
							<thead>
								<tr>
									<th>订单ID</th>
									<th>总金额</th>
									<th>订单日期</th>
									<th>订单状态</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody id="showOrder">
								<!-- 表格行 1 -->
							</tbody>
						</table>

						<div class="page clearfix">
							<div class="pull-left">共 <span id="total"></span> 条记录 第 <span id="pageNum"></span> / <span
									id="pages"></span> 页
							</div>
							<div class="pull-right">

								<nav aria-label="..." class="pull-left">
									<ul class="pagination" id="pageTo">

									</ul>
								</nav>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
		aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLongTitle">商品详情</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<table class="table">
						<tr>
							<th>商品名称</th>
							<th>商品品牌</th>
							<th>商品出售价</th>
							<th>商品采购价</th>
							<th>商品数量</th>
							<th>小计</th>
							<th>描述</th>
						</tr>
						<tbody id="showSupplierAndProductMessage">

						</tbody>
					</table>

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
					<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
				</div>
			</div>
		</div>
	</div>



	<script src="app-assets/js/vendors.min.js" type="text/javascript"></script>
	<script src="app-assets/js/app-menu.js" type="text/javascript"></script>
	<script src="app-assets/js/app.js" type="text/javascript"></script>
	<script src="app-assets/js/echarts.min.js" type="text/javascript"></script>
	<script src="app-assets/js/sweetalert2.js" type="text/javascript"></script>


</body>
<script>
	// 查询所有订单
	function selectAll(pageNum) {
		$.ajax({
			'url': HTTP.getUserInfo + '/purchaseOrders/selectList',
			'type': 'get',
			'dataType': 'json',
			'data': { pageNum },
			'success': selectAllSuccess
		})
	}
	// selectAllSuccess
	function selectAllSuccess(data) {
		$('#showOrder tr').remove();
		data.data.list.forEach((dd, index) => {
			const orderId = dd.orderId;
			let status = '';
			let statusClass = ''; // 新增变量用于存储状态类名

			if (dd.status === 0) {
				status = '未发货';
				statusClass = 'status-unshipped'; // 设置未发货状态的类名
			} else if (dd.status === 1) {
				status = '发货中';
				statusClass = 'status-shipping'; // 设置发货中状态的类名
			} else if (dd.status === 2) {
				status = '已发货';
				statusClass = 'status-shipped'; // 设置已发货状态的类名
			} else if (dd.status === 3) {
				status = '已收货';
				statusClass = 'status-received'; // 设置已收货状态的类名
			}

			$('#showOrder').append(`
            <tr id="order-${dd.orderId}">
                <td>${dd.orderId}</td>
                <td>￥${parseFloat(dd.totalAmount).toFixed(2)}</td>
                <td>${dd.createdAt}</td>
                <td class="${statusClass}">${status}</td> <!-- 添加状态类名 -->
                <td>
                    ${dd.status === 2 ? `<button class="btn btn-sm btn-primary" onclick="shouhuo('${dd.orderId}') ">收货</button>` : ''}
                    <button class="btn btn-sm btn-primary" data-toggle="collapse" data-target="#divOrderMessages-${dd.orderId}">订单信息</button>
                </td>
            </tr>
            <tr>
                <td colspan="5">
                    <div id="divOrderMessages-${dd.orderId}" class="collapse">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>订单ID</th>
                                    <th>供应商名称</th>
                                    <th>小计</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                    <th>详情</th>
                                </tr>
                            </thead>
                            <tbody id="showMessages-${dd.orderId}">
                            
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>`);

			// 子订单信息展示
			dd.purchaseOrdersVOList.forEach((subDd) => {
				let statusA = '';
				let statusAClass = ''; // 新增变量用于存储子订单状态类名

				if (subDd.status === 0) {
					statusA = '未发货';
					statusAClass = 'status-unshipped'; // 设置未发货状态的类名
				} else if (subDd.status === 1) {
					statusA = '发货中';
					statusAClass = 'status-shipping'; // 设置发货中状态的类名
				} else if (subDd.status === 2) {
					statusA = '已发货';
					statusAClass = 'status-shipped'; // 设置已发货状态的类名
				} else if (subDd.status === 3) {
					statusA = '已收货';
					statusAClass = 'status-received'; // 设置已收货状态的类名
				}

				$('#showMessages-' + dd.orderId).append(`
                <tr id="orderMessages-${subDd.orderId}">
                    <td>${subDd.orderId}</td>
                    <td>${subDd.supplierName}</td>
                    <td>￥${parseFloat(subDd.totalAmount).toFixed(2)}</td>
                    <td class="${statusAClass}">${statusA}</td> <!-- 添加状态类名 -->
                    <td>
                        ${subDd.status !== 3 && subDd.status !== 1 && subDd.status !== 2 ? `<button class="btn btn-sm btn-primary" onclick="updateOrderStatus('${subDd.orderId}', '${subDd.supplierId}')">发货</button>` : ''}
                    </td>
                    <td><button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#exampleModalLong" onclick="xiangqing('${subDd.orderId}', '${subDd.supplierId}')">订单详情</button></td>
                </tr>`);
			});
		});

		// 更新分页信息
		$('#total').text(data.data.total); // 总记录数
		$('#pageNum').text(data.data.pageNum); // 当前页码
		$('#pages').text(data.data.pages); // 总页数

		// 渲染分页按钮
		renderPagination(data.data);
	}

	// 更新订单状态
	function updateOrderStatus(orderId, supplierId) {
		// 发送请求更新订单状态
		$.ajax({
			url: HTTP.getUserInfo + '/purchaseOrders/updateStatus',
			type: 'get',
			data: { orderId, supplierId },
			success: function (response) {
				// 刷新页面数据
				selectAll(1);
			},
		});
	}

	// 收货按钮
	function shouhuo(orderId) {
		alert(orderId);
		// 发送请求更新订单状态
		$.ajax({
			url: HTTP.getUserInfo + '/purchaseOrders/updateStatusByOrderId',
			type: 'post',
			data: { orderId: orderId },
			dataType: 'json',
			success: function (response) {
				selectAll(1);
			},
		});
	}

	function xiangqing(orderId, supplierId) {
		alert(orderId + supplierId);
		$.ajax({
			type: 'get',
			url: 'http://localhost:24080/purchaseOrderDetails/queryAllByOrderIdAndSupplierId',
			data: {
				orderId: orderId,
				supplierId: supplierId
			},
			success: function (data) {
				$('#showSupplierAndProductMessage').empty();
				console.log(data);
				var showProductAndPodMessage = data.data;
				showProductAndPodMessage.forEach(function (item) {
					var str = `
					<tr>
						<td>${item.productName}</td>
						<td>${item.brand}</td>
						<td>${item.price}</td>
						<td>${item.purchasePrice}</td>
						<td>${item.quantity}</td>
						<td>${item.subtotal}</td>
						<td>${item.description}</td>
					</tr>
				`
					$('#showSupplierAndProductMessage').append(str);
				});
			}
		});
	}

	function renderPagination(data) {
		const pagination = $('#pageTo');
		pagination.empty();

		for (let i = 1; i <= data.pages; i++) {
			pagination.append(`
            <li class="page-item ${i === data.pageNum ? 'active' : ''}">
                <a class="page-link" href="javascript:void(0);" onclick="selectPage(${i})">${i}</a>
            </li>
        `);
		}
	}

	function selectPage(pageNum) {
		selectAll(pageNum);
	}

	$(document).ready(function () {
		selectAll(1);
	});


</script>

</html>